<template>
	<view>
		<view style="min-height: 780rpx;  padding-bottom: 18vh; box-sizing: border-box;">
			<uni-notice-bar show-icon show-close single text="可以长按下方行程上下拖拽DIY排序" />
			<view :style="{'background': '#ffffff'} "
				style="display: flex; align-items: center; justify-content: space-between; width: 100%; height: 20vw;border: 1px solid #e8e8e8;border-radius: 5rpx;margin-bottom: 40rpx;">
				<view class="isCardall">
					<view class="TimeAllbox">
						<view class="timeALLWord">出发地</view>
						<view class="timeALLWord">离开地</view>
					</view>
					<view class="contectBox">
						<view class="contectWord">{{starEnd.ScenicName}}</view>
						<view class="contectIndex">{{starEnd.contect}}</view>
					</view>
				</view>
			</view>
			<view class="spinx">

			</view>
			<l-drag ref="dragRef3" :list="isAllDataSele" @change="handleDragChange" grid-height="200rpx" :column="1"
				:touchHandle="touchHandle3"  friction="1" longpress :disabled="item => item.disabled">
				<template #grid="{active, content, oindex}">
					<view :style="{'background': '#ffffff'} " :class="{active}" 
						style="display: flex; align-items: center; justify-content: space-between;  height: 20vw;border: 1px solid #e8e8e8;border-radius: 5rpx;"
						@touchstart="touchHandle3 = true" @touchend="touchHandle3 = false">
						<view class="isCardall"  :class="{'text-active': active}">
							<view class="TimeAllbox">
								<view class="timeALLWord" v-if="!content.Day">{{content.dayWord}}</view>
								<view class="timeALLWord" v-if="content.Day">DAY</view>
								<view class="timeALLIndex" v-if="content.Day">{{content.Day}}</view>
							</view>
							<view class="contectBox">
								<view class="contectWord">{{content.ScenicName}}</view>
								<view class="contectIndex">{{content.contect}}</view>
							</view>
						</view>
						<!-- 只有非第一个和非最后一个控件才显示删除按钮 -->
						<image v-if="content.Day&&isAllDataSele.length>1" @click="removeItem(content)"
							style="width: 40rpx;height: 40rpx;margin-right: 5vw;"
							src="../../../../static/eIcones/关闭.png" mode=""></image>
					</view>
				</template>
			</l-drag>
			<view class="isCardAddButton" @click="AddOtherDay">
				<image class="addButton"
					src="https://file.whshiyuan.cn:9000/toopu/compressed/2781731401081_compressed_img.png"
					mode="aspectFill"></image>
				<view class="addAday">添加一天</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		reactive,
		watchEffect,
		computed
	} from 'vue';
	import {
		Deleteorderdelete
	} from '../../../../config/API/Customize';
	const propos = defineProps({
		isAllDataSele: {
			type: Array,
			default: () => []
		},

	})
	// 起止点 
	const starEnd = ref({
		dayWord: '出发地离开地',
		HotelID: 0,
		HotelNum: 0,
		HotelType: 0,
		Latitude: 0,
		Longitude: 0,
		ScenicId: 1,
		ScenicName: "成都"
	})
	const alldata = ref()
	const emits = defineEmits(['isNowData', 'addDay', 'deleDay'])
	const AddOtherDay = () => {
		emits('addDay')
	}
	let isFirstRun = true; // 标记首次运行，避免初始同步时触发额外更新
	// 监听 localData 的变化并通知父组件
	watch(() => propos.isAllDataSele, (newVal, oldVal) => {
	    if (!isFirstRun && JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
	        console.log('子组件监听到的变化', newVal);
	        // 可以在这里执行其他逻辑，比如更新本地状态
	    }
	    isFirstRun = false;
	}, { deep: true });
	const removeItem = (content) => {
			const newData = propos.isAllDataSele.filter(item => item.Day !== content.Day);
			newData.forEach((item, idx) => item.Day = idx + 1);
			emits('deleDay', content.Day);
			emits('isNowData', newData);
		};

	const dragRef3 = ref(null)
	const touchHandle3 = ref(false)
	const handleDragChange = (v) => {
		const updatedItems = v.map((item, index) => ({
			...item.content,
			Day: index + 1
		}));
		emits('isNowData', updatedItems);
	};
</script>
<style scoped lang="scss">
	.isCardAddButton {
		z-index: 7;
		display: flex;
		position: absolute;
		align-items: center;
		margin-left: 10rpx;
	}

	.addAday {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #bababa;
	}

	.addButton {
		width: 50rpx;
		height: 50rpx;
	}

	.timeALLWord {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.TimeAllbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.contectWord {
		font-size: 38rpx;
		font-weight: 500;

	}

	.timeALLIndex {
		color: #333333;
		font-size: 40rpx;
		font-weight: bold;
	}

	.contectIndex {
		margin-top: 15rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #c0c0c0;
	}

	.isCardall {
		display: flex;
		align-items: center;
	}

	.contectBox {
		margin-left: 10vw;
	}

	.TimeAllbox {
		margin-left: 5vw;
	}

	.grid {
		height: 100%;
		/* #ifdef APP-NVUE */
		flex: 1;
		/*  #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		/*  #endif */
		padding: 16rpx;
		box-sizing: border-box;
		position: relative;
	}

	.mover {
		position: relative;
		width: 50rpx;
		margin-top: 10rpx;
		height: 30rpx;
		border: 2px solid #ddd;
		border-left: none;
		border-right: none;
		/* background-color: #ddd; */
	}

	.mover::before {
		content: '';
		position: absolute;
		width: 50rpx;
		top: 15rpx;
		border-top: 2px solid #ddd;
	}



	/* #ifdef APP-NVUE */
	.text {
		font-size: 50rpx;
		font-weight: bold;
	}

	/*  #endif */
	.ghost {
		background-color: rgba(0, 0, 255, 0.1);
	}

	.inputs {
		display: flex;
		align-items: center;

		input {
			background-color: #fff;
			width: 80rpx;
			border: 1rpx solid #ddd;
			// padding: 5rpx 10rpx;
			margin: 0 8rpx;
		}
	}

	.inner {
		/* #ifdef APP-NVUE */
		flex: 1;
		/*  #endif */
		/* #ifndef APP-NVUE */
		height: 100%;
		width: 100%;
		/*  #endif */

		border: 1rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
		font-size: 50rpx;
		font-weight: bold;
		color: blue;
		transition: all 300ms ease;
		position: relative;
	}
	.active {
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.1);
		background-color: blue;
		// color: white;
		border: 1rpx solid blue;
		transform: scale(1.1);
		transition: all 0.25s;
	}
	.text-active {
		font-size: 50rpx;
		font-weight: bold;
		// color: white;
	}
</style>